<template>
  <div class="mvs-container">
    <div class="filter-wrap">
      <div class="section-wrap">
        <span class="section-type">{{areaList.name}}</span>
          <ul class="tabs-wrap">
            <li class="tab"
            v-for="(navChildObj, index) in areaList.children"
            :key="index">
              <span class="title"
              :class="{active: area == navChildObj.name}"
              @click="area = navChildObj.name">{{navChildObj.name}}</span>
            </li>
          </ul>
      </div>
      <div class="section-wrap">
        <span class="section-type">{{typeList.name}}</span>
          <ul class="tabs-wrap">
            <li class="tab"
            v-for="(navChildObj, index) in typeList.children"
            :key="index">
              <span class="title"
              :class="{active: type == navChildObj.name}"
              @click="type = navChildObj.name">{{navChildObj.name}}</span>
            </li>
          </ul>
      </div>
      <div class="section-wrap">
        <span class="section-type">{{sortList.name}}</span>
          <ul class="tabs-wrap">
            <li class="tab"
            v-for="(navChildObj, index) in sortList.children"
            :key="index">
              <span class="title"
              :class="{active: order == navChildObj.name}"
              @click="order = navChildObj.name">{{navChildObj.name}}</span>
            </li>
          </ul>
      </div>
    </div>
    <div class="mvs">
      <div class="items">
        <div class="item"
        v-for="(mvsObj, index) in mvsList" :key="index">
          <div class="img-wrap">
            <img :src="mvsObj.cover" alt="">
            <div class="num-wrap">
              <div class="iconfont icon-play"
              @click="playMusic(mvsObj.id)"></div>
              <div class="num">{{mvsObj.playCount | changeCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{mvsObj.name}}</div>
            <div class="singer">{{mvsObj.artistName}}</div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
    @current-change="changePage"
    :current-page="page"
    :limit="limit"
    :page-size="5"
      background
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      mvsList: [],
      total: 10,
      page: 1,
      // 页容量
      limit: 8,
      // 地区
      area: '全部',
      // 类型
      type: '全部',
      // 排序
      order: '上升最快',
      areaList: {
        name: '地区',
        children: [
          { name: '全部' },
          { name: '内地' },
          { name: '港台' },
          { name: '欧美' },
          { name: '日本' },
          { name: '韩国' }
        ]
      },
      typeList: {
        name: '类型',
        children: [
          { name: '全部' },
          { name: '官方版' },
          { name: '原声' },
          { name: '现场版' },
          { name: '网易出品' }
        ]
      },
      sortList: {
        name: '排序',
        children: [
          { name: '上升最快' },
          { name: '最热' },
          { name: '最新' }
        ]
      }
    }
  },
  watch: {
    area () {
      // 返回第一页
      this.page = 1
      this.loadMvs()
    },
    type () {
      // 返回第一页
      this.page = 1
      this.loadMvs()
    },
    order () {
      // 返回第一页
      this.page = 1
      this.loadMvs()
    }
  },
  filters: {
    changeCount (value) {
      if (value > 100000) {
        const playCount = parseInt(value / 100000) + '万'
        return playCount
      }
      // console.log(value)
    }
  },
  created () {
    this.loadMvs()
  },
  methods: {
    loadMvs () {
      axios({
        url: 'https://autumnfish.cn/mv/all',
        method: 'get',
        params: {
          area: this.area,
          type: this.type,
          order: this.order,
          limit: this.limit,
          offset: (this.page - 1) * this.limit
        }
      }).then(res => {
        const { data, count } = res.data
        // for (let i = 0; i < data.length; i++) {
        //   const playCount = data[i].playCount
        //   if (playCount > 100000) {
        //     data[i].playCount = parseInt(playCount / 100000) + '万'
        //   }
        // }
        // 保存总条数
        // 接口问题
        if (count) {
          this.total = count
        }
        this.mvsList = data
        // console.log(res)
      })
    },
    changePage (page) {
      this.page = page
      this.loadMvs()
    },
    playMusic (id) {
      axios({
        url: 'https://autumnfish.cn/song/url',
        method: 'get',
        params: {
          id
        }
      }).then(res => {
        this.$parent.musicUrl = res.data.data[0].url
      })
    }
  }
}
</script>
